/*提醒属性
动画属性
@keyframes myname{
	0%{}
	100%{}
}
动画简写 - animation: name 持续时间 延迟时间 播放次数(infinite无限循环) 过渡方式;包含全部属性
调用动画 - animation-name: myname;
持续时间 - animation-duration: 1s;
播放方式 - animation-timing-function; linear;
播放次数 - animation-iteration-count: infinite;无限循环可以写次数
延迟时间 - animation-delay: 2s;
自定义过渡效果 - transition-timing-function: cubic-bezier(1, 0, .5, 1);
过渡属性 - transition: background-color .3s linear;ease快到慢、linear恒速、ease-in越来越快、ease-out越来越慢、ease-in-out先快后慢
2D旋转属性 -  transform: rotate(180deg);//需在操作的样式加：transition:all 3s;
3D旋转属性 - transform: rotateY(180deg);//需在操作的样式加：transition:all 3s;
偏移属性 - transform: translate(-3px, -3px);包含下面两个值
水平偏移属性 - transform: translateX(-3px);
垂直偏移属性 - transform: translateY(-3px);
缩放属性 - transform: scale(1.1);
背景颜色渐变属性 - background: linear-gradient(to right, #000, #fff);

表格属性
取消表格外边框 - border-collapse: collapse;

文本属性
字体缩进属性 - text-indent: 2em;
设置字体间距 - letter-spacing: -10px;
阻止复制属性 - user-select: none;
溢出隐藏属性 - overflow:hidden;
强制文本在一行显示属性 - white-space:nowrap;
文本溢出显示省略号属性 - text-overflow:ellipsis;

css属性
元素的垂直对齐方式 - vertical-align: middle;
轮廓样式 - outline: none;

兼容属性
css3 4个内核 -moz- -ms- -o- -webkit-;
IE opacity写法 - filter:alpha(opacity = 100);
  
Flex
父元素设置 - display: flex;

水平设置 - justify-content: ;
子元素水平居中 - justify-content: center;
子元素水平左右距离一致 - justify-content: space-around;
子元素水平左中右布局 - justify-content: space-between;

垂直设置 - align-items: ;
子元素垂直居中 - align-items: center;                                                                                                            
*/

/* 通用设置 */
* {margin: 0;padding: 0;font-family: "微软雅黑", tahoma, arial, simsun, sans-serif;font-size: 13px;}
html {height: 100%;}
body {color: #222;height: 100%;background-color: #eee;}
a {-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
a, a:hover, a:active, a:visited, a:link, a:focus {-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;background: none;text-decoration: none;}
a, u {color: inherit;font-size: inherit;text-decoration: none;}
a:link {color: inherit;text-decoration: none;}
a:visited {color: inherit;text-decoration: none;}
a:hover {color: inherit;text-decoration: none;}
a:active {color:  inherit;text-decoration: none;}
ul {font-size: 0;}
li {list-style: none;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
table {border-collapse:collapse;}
th, td {padding: 5px;}
input{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
input[type="text"]:focus, input[type="password"]:focus, select:focus {box-shadow: none;}
iframe {border: none;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.clearfix::after {clear: both;content: "";height: 0;display: block;visibility: hidden;}
/* 背景颜色 */
#body-color {background-color: #fff;}


/* 首页 */
/* 主题 */
#main{width: 100%;}

/* 轮播 */
.swiper-wrapper .swiper-slide a {display: block;line-height: 0;}
.swiper-wrapper .swiper-slide img {width: 100%;}
.swiper-pagination-bullet-active {background-color: #fff;}

/* 公告栏 */
.notice {padding: 4px;text-align: left;font-size: 16px;margin-top: 4px;}
.notice marquee {text-align: inherit;overflow: hidden;white-space: nowrap;display: inline-block;}

/* 功能列表 */
.functionlist>div {width: 100%;color: #797979;display: flex;justify-content: space-between;}
.functionlist>div+div{margin-top: 3px;}
.functionlist>div div {width: 33.3%;border: 1px solid #efefef;text-align: center;font-size: 0.8rem;margin: 0 1.5px;}
.functionlist>div div a {display: block;padding: 30px 0;}
.functionlist>div div  i {color: #f76339;font-size: 30px;padding-bottom: 5px;vertical-align: middle;}

/* 页脚固定 */
#footer-fixed{height: 60px;}

/* 页脚 */
#footer {width: 100%;position: fixed;bottom: 0;z-index: 9;background-color: #fff;}
#footer>div {width: 100%;color: #444;border-top: 1px solid #ddd;display: flex;justify-content: space-around;}
#footer>div div {width: 33%;text-align: center;padding: 10px 0;}
#footer>div div a {display: block;font-size: 0;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
#footer>div div a i {padding-bottom: 5px;}
/* 页脚active */
.footer-div-active{color: #f67969;}


/* 任务中心 */
/* 任务操作 */
.task-operation {width: 100%;background-color: #fff;display: flex;justify-content: space-between;margin-top: 10px;}
.task-operation div {width: 33.3%;text-align: center;padding: 15px 0;}
.task-operation div i{color: #1296db;font-size: 30px;padding-bottom: 10px;}

/* 任务大厅 */
.task-hall {width: 100%;}
.task-hall>div {width: 100%;}
.task-hall>div div {background-color: #fff;margin-top: 10px;padding: 25px;}
.task-hall>div div a {display: flex;align-items: center;}
.task-hall>div div i {color: #f75f34;font-size: 35px;}
.task-hall div span {font-size: 16px;margin-left: 20px;}


/* 个人中心 */
/* 个人资料 */
.personaldata {width: 100%;background: linear-gradient(to bottom, #f67969, #fffffe);padding: 30px 0 20px;}
.personaldata>div {width: 100%;}
.personaldata>div:nth-child(1)>div {display: flex;justify-content: center;}
.personaldata>div:nth-child(1)>div img {width: 80px;height: 80px;border-radius: 100%;display: block;}
.personaldata>div:nth-child(1)>div h4 {font-size: 16px;color: #333;font-weight: bold;margin-top: 5px;}
.personaldata>div:nth-child(1)>div p {font-size: 12px;color: #666;}
.personaldata>div:nth-child(2)>div {display: flex;justify-content: space-between;align-items: center;margin-top: 30px;font-size: 18px;}
.personaldata>div:nth-child(2)>div>div {width: 33%;text-align: center;}
.personaldata>div:nth-child(2)>div>div h5 {color: orangered;font-size: 15px;font-weight: normal;}
.personaldata>div:nth-child(2)>div>div p {font-size: 12px;color: #666;margin-top: 5px;}

/* 个人操作 */
.personal-operation, .personal-function {width: 100%;margin-top: 10px;}
.personal-operation>div {width: 100%;display: flex;justify-content: space-between;}
.personal-operation>div div, .personal-function>div div {width: 33.3%;text-align: center;padding: 30px 0;margin: 0 1px;background-color: #fff;}
.personal-operation>div div i {color: #f76845;font-size: 25px;}
.personal-operation>div div p {margin-top: 5px;}

/* 个人功能 -> personal-function */
.personal-function>div {width: 100%;display: flex;justify-content: space-between;}
.personal-function>div div {margin: 1px;}
.personal-function>div div i {color: #f4eb30;font-size: 25px;}
.personal-function>div div p {margin-top: 5px;}


/* 退出登录 */
.exit-login {width: 100%;margin: 10px 0 15px;}
.exit-login>div {width: 100%;display: flex;justify-content: center;color: #fff;font-size: 16px;text-align: center;}
.exit-login>div a {width: 96%;background-color: #f67969;display: block;padding: 8px 0;}


/* 发布任务 */
#release-task {width: 100%;}
#release-task .header {background-color: #f67969;color: #fff;display: flex;justify-content: space-between;align-items: center;padding: 10px;}
#release-task .header h1 {font-size: 20px;}
#release-task .header i {font-size: 20px;}
#release-task .main {width: 100%;}
#release-task .main .container {margin: 16px;padding: 8px 16px;border: 1px solid #eee;}
#release-task .main .container .title, #release-task .main .container .quantity, #release-task .main .container .totalprice {display: flex;justify-content: space-between;border-bottom: 1px solid #eee;padding: 10px;}
#release-task .main .container .title h3, #release-task .main .container .quantity h3, #release-task .main .container .totalprice h3 {font-size: 16px;}
#release-task .main .container .title input, #release-task .main .container .quantity input {border: none;text-align: right;font-size: 16px;outline: none;}
#release-task .main .container .content {margin: 15px 10px 10px 10px;}
#release-task .main .container .content textarea {border: 1px solid #eee;width: 100%;height: 120px;font-size: 16px;outline: none;}
#release-task .main .container .file {padding: 50px 10px;margin-top: 5px;border: 1px solid #eee;display: flex;justify-content: center;align-items: center;}
#release-task .main .container .file div input {width: 80px;height: 30px;text-align: center;border: 1px solid #eee;outline: none;}
#release-task .main .container .file div input:disabled, #release-task .main .container .totalprice input:disabled {background-color: inherit;color: inherit;}
#release-task .main .container .file div p {font-size: 12px;}
#release-task .main .container .file input {width: 0;height: 0;overflow: hidden;}
#release-task .main .container .price {border: 1px solid #eee;padding: 10px;margin-top: 10px;}
#release-task .main .container .price div {display: flex;justify-content: space-between;padding: 8px;}
#release-task .main .container .price div h2 {font-size: 16px;}
#release-task .main .container .price div input, #release-task .main .container .totalprice input {text-align: right;border: none;font-size: 16px;outline: none;}
#release-task .main .container .price div input:disabled {background-color: inherit;color: inherit;}
#release-task .main .container .price p {padding: 0 8px;font-size: 12px;color: #999;}
#release-task .main .container .quantity, #release-task .main .container .totalprice {padding: 15px 20px;}
#release-task .main .container .submit {margin-top: 15px;padding-top: 15px;border-top: 2px solid #eee;}
#release-task .main .container .submit input {background-color: #f67969;width: 100%;border: none;color: #fff;padding: 7px;font-size: 16px;}
#release-task .footer {width: 100%;}
#release-task .footer p {padding: 0 16px 10px;}



/* 任务记录、任务大厅 */
#task-record, #task-hall {width: 100%;}
#task-record .header, #task-hall .header {background-color: #f67969;color: #fff;display: flex;justify-content: space-between;align-items: center;padding: 10px;}
#task-record .header h1, #task-hall .header h1 {font-size: 20px;}
#task-record .header i, #task-hall .header i {font-size: 20px;}
#task-record .main {width: 100%;}
#task-record .main .container{display: flex;justify-content: center;}
#task-record .main .container .wind {margin-top: 40px;}
#task-record .main .container img {width: 128px;}
#task-record .main .container .wind p {margin-top: 20px;text-align: center;}


/* 任务大厅 */
#task-hall .main .container {width: 100%;}
#task-hall .main .container .task-list {background-color: #fff;padding: 10px 15px;margin-bottom: 5px;}
#task-hall .main .container .task-list>div {display: flex;justify-content: space-between;}
#task-hall .main .container .task-list>div h6 {font-size: 14px;}
#task-hall .main .container .task-list>div>div {display: flex;align-items: center;}
#task-hall .main .container .task-list>div>div>div span {font-size: 16px;color: red;}
#task-hall .main .container .task-list>div>div>div p {text-align: right;color: #666;font-size: 14px;margin-top: 3px;}
#task-hall .main .container .task-list>div>div>div i {color: #e4e4e4;}
#task-hall .main .container .task-list>div>div div:first-child {margin-right: 10px;}
/* 领取规则 */
#task-hall .main .container .task-example {background-color: #fff;padding: 20px 15px;}
#task-hall .main .container .task-example .task-e-text {width: 100%;}
#task-hall .main .container .task-example .task-e-text p {font-size: 14px;}
#task-hall .main .container .task-example .task-e-img {margin-top: 20px;}
#task-hall .main .container .task-example .task-e-img img {width: 100%;}
